<template>
  <div>
    <CloudButton @click="clickBtn()">显示</CloudButton>
    <CloudModal
      :visible="visible"
      :destroyOnClose="true"
      dialogClass="test-dialog"
      subTitle="我是副标题"
      okText="确定"
      cancelText="取消"
      :okLoading="getOkLoading"
      @ok="handleOk()"
      @cancel="closeModel()"
    >
        <CloudSwitch v-model="checked" />
    </CloudModal>
  </div>
</template>

<script>
export default {
  title: '6.确定按钮loading',
  data() {
    return {
      visible: false,
      checked: false
    }
  },
  computed: {
    getOkLoading () {
      return this.checked
    }
  },
  methods: {
    clickBtn() {
      this.visible = !this.visible
    },
    closeModel() {
      this.visible = false
      console.log('cancelcancelcancel')
    },
    handleOk() {
      console.log('okokok')
    }
  }
}
</script>

<style lang="scss">
</style>